<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding-left: 200px;
        }
        .box{
            margin: 2rem;
        }
        .box, .box > span{
            width: 100px;
            height: 100px;
            border: solid 1px #333;
        }
        .box > span{
            display: block;
            border: none;
            background-color: rgba(255,0,0, .5);
        }
    </style>
</head>
<body>
    <h1>Transform</h1>
    <h2>默认状态 -> transform: matrix(1,0,0,1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0,0,1,0,0)"></span>
    </div>
    <h2>translateX(20px) -> 水平平移20px -> transform: matrix(1,0,0,1,20,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0,0,1,20,0)"></span>
    </div>

    <h2>rotate(45deg) -> 旋转45deg -> transform: matrix(0.7071,0.7071,-0.7071,0.7071,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(0.7071,0.7071,-0.7071,0.7071,0,0)"></span>
    </div>

    <h2>scaleX(1.5) -> 水平缩放1.5倍 -> transform: matrix(1.5,0,0,1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1.5,0,0,1,0,0)"></span>
    </div>

    <h2>scaleY(1.5) -> 垂直缩放1.5倍 -> transform: matrix(1,0,0,1.5,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0,0,1.5,0,0)"></span>
    </div>

    <h2>scale(1.5) -> 水平垂直都缩放1.5倍 -> transform: matrix(1.5,0,0,1.5,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1.5,0,0,1.5,0,0)"></span>
    </div>

    <h2>skewX(10deg) -> 水平拉伸10deg -> transform: matrix(1,0,0.17632698,1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0,0.17632698,1,0,0);transform-origin:top left"></span>
    </div>

    <h2>skewY(10deg) -> 垂直拉伸10deg -> transform: (1,0.17632698,0,1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0.17632698,0,1,0,0);transform-origin:top left"></span>
    </div>

    <h2>水平垂直都拉伸10deg -> transform: matrix(1,0.17632698,-0.17632698,1,20,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0.17632698,-0.17632698,1,20,0);transform-origin:top left"></span>
    </div>

    <h2>水平镜像 -> transform: matrix(-1,0,0,1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(-1,0,0,1,0,0);">镜像</span>
    </div>

    <h2>垂直镜像 -> transform: matrix(1,0,0,-1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(1,0,0,-1,0,0);">镜像</span>
    </div>

    <h2>水平垂直镜像 -> transform: matrix(-1,0,0,-1,0,0)</h2>
    <div class="box">
        <span style="transform: matrix(-1,0,0,-1,0,0);">镜像</span>
    </div>
    
</body>
</html>